<template>
    <div class="bbox">
        <div class="comment" v-for="item in comments" :key="item.id">
            <div class="img">
                <img :src="users[item.user_id].avatar" alt="" />
            </div>
            <div class="content">
                <div class="name">{{ users[item.user_id].nick_name }}</div>
                <div class="time">{{ item.created_at | timeago }}</div>
                <div class="text">{{ item.render_content }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["comments", "users"],
    created() {},
};
</script>

<style lang="less" scoped>
.bbox {
    width: 100%;
    color: #333;
    line-height: 21px;
    padding: 20px 15px 15px 15px;
    .comment {
        width: 100%;
        margin-top: 0;
        margin-bottom: 30px;
        display: flex;
        .img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
            }
        }
        .content {
            flex: 1;
            position: relative;
            .name {
                width: 100%;
                font-size: 12px;
                color: #999;
                margin-top: 5px;
                margin-bottom: 13px;
            }
            .time {
                position: absolute;
                font-size: 10px;
                color: #999;
                right: 15px;
                top: 6px;
            }
            .text {
                width: 100%;
                font-size: 14px;
                line-height: 1.2;
                color: #333;
            }
        }
    }
}
</style>
